window.onload = function(){
    // 获取元素
    var Box = document.getElementById("Box");
    var topTitle_left_ImgBox = document.getElementsByClassName("topTitle_left_ImgBox")[0];
    var leftNav = document.getElementsByClassName("leftNav")[0];
    var contentBox = document.getElementsByClassName("contentBox")[0];
    var contenerBox = document.getElementsByClassName("contenerBox")[0];
    var contenerBox_ul = document.getElementsByClassName("contenerBox_ul")[0];
    var contenerBox_ulTwo = document.getElementsByClassName("contenerBox_ulTwo")[0];
    var topTitle = document.getElementsByClassName("topTitle")[0];
    var leftNav = document.getElementsByClassName("leftNav")[0];
    var bannerBox = document.getElementsByClassName("bannerBox")[0];
    var leftNav_ul_li = document.getElementsByClassName("leftNav_ul")[0].getElementsByTagName("li");
    var contenerBox_ulThree = document.getElementsByClassName("contenerBox_ulThree")[0];
    var contenerBox_ulThree_li = contenerBox_ulThree.getElementsByTagName("li");
    var navSpan = document.getElementsByClassName("nav")[0].getElementsByTagName("span");
    var body = document.body;
    var boolean = true;
    var timer = null;
    var timerTwo = null;
    var index = 0;
    var indexTwo = 0;
    console.log(contenerBox_ulThree_li);
    
     // swper轮播图插件属性设置
     var mySwiper = new Swiper ('.swiper-container', {
        direction: 'horizontal', // 垂直切换选项
        loop: true, // 循环模式选项
        autoplay:true,
        speed:1000
    });

    // 正在加载中动画
    function animenr(){
    	timer = setTimeout(animenr,100);
    	ContentHide();
    	if(index == 5){
    		body.style.backgroundImage = "";
			clearInterval(timer);
			ContentShow();
			
    	}
       	body.style.background = "url(img/卖座网加载中动图.gif)";
    	body.style.backgroundRepeat = "no-repeat";
    	body.style.backgroundPosition = "center";
    	index++;
    }
    animenr();
    
    //主体内容隐藏函数
    function ContentHide(){
    	Box.style.display = "none";
    	contenerBox.style.display = "none";
    	topTitle.style.visibility = "hidden";
    	leftNav.style.display = "none";
    	bannerBox.style.display = "none";
    }
    //主体内容显示函数
    function ContentShow(){
    	Box.style.display = "block";
    	contenerBox.style.display = "block";
    	leftNav.style.display = "block";
    	bannerBox.style.display = "block";
		topTitle.style.visibility = "initial";
    }

    // 左侧隐藏列表显示和隐藏
    topTitle_left_ImgBox.onclick = function(){
        if(boolean){
            leftNav.style.transition = "all 0.6s";
            leftNav.style.left = "0px";
        }else{
            leftNav.style.left = "-1500px";
            leftNav.style.transition = "all 1s";
        }
        boolean = !boolean;
    }

    // 首页主内容元素的创建和Ajax请求渲染
    function Continer(){
        // 首页——更多热映数据请求
        ajax("get","https://www.easy-mock.com/mock/5bdc1aff96a2e50a9ee1982d/example/SouYeTop","",function(Shuju){
           var json = JSON.parse(Shuju);
           var SJu = json.data.films;
           for(var i= 0;i<SJu.length;i++){
               var each = SJu[i];
               var Imgurl = each.cover.origin;
               var Name = each.name;
               var shulian = each.cinemaCount;
               var goupiao = each.watchCount;
               var pinfen = each.grade;
               hotShowing(Imgurl,Name,shulian,goupiao,pinfen);
           }
           evenMore();
        });

        // 首页——即将上映数据请求
        ajax("get","https://www.easy-mock.com/mock/5bdc1aff96a2e50a9ee1982d/example/SouYeBottom","",function(ShujuTwo){
            var jsonTwo = JSON.parse(ShujuTwo);
            var SJuTwo = jsonTwo.data.films;
            for(var i= 0;i<SJuTwo.length;i++){
                var each = SJuTwo[i];
                var Imgurl = each.cover.origin;
                var Name = each.name;
                var time = each.premiereAt;
                // 将接收到的时间戳转为日期
                    var date = new Date(time);
                    var oMonth = date.getMonth()+1;
                    var oDate = date.getDate();
                    var Time = oMonth+"月"+oDate+"日"+"上映";
                comingSoon(Imgurl,Name,Time);
            }
        });
    }
    Continer();

    // 首页——更多热映
    function hotShowing(Imgurl,Name,shulian,goupiao,pinfen){
         // 创建一个文档碎片
         var oFrag = document.createDocumentFragment();
         var tFrag = document.createDocumentFragment();
         // 创建UL，且添加到contenerBox盒子中
         var oli = document.createElement("li");
         oli.innerHTML  = "<div class='contenerBox_ul_ImgDiv'><img src="+Imgurl+" alt='' width='100%' height='100%'></div><div class='contenerBox_ul_neirDiv'><div class='title_name'><p>"+Name+"</p><p><span><span>"+shulian+"</span>家影院上映 <span>"+goupiao+"</span>人购票</p></div><div class='pinfen'><span>"+pinfen+"</span></div></div>";
         oFrag.appendChild(oli);
         contenerBox_ul.appendChild(oFrag);
    }

    // 首页中间隔层栏
    function evenMore(){
        // 创建一个文档碎片
        var oFrag = document.createDocumentFragment();
        // 创建div（更多热映、即将上映）
        var oDiv = document.createElement("div");
        var tDiv = document.createElement("div");
        oDiv.setAttribute("class","gengduodianyin");
        tDiv.setAttribute("class","jijiangshangyin");
        oDiv.innerHTML = "更多热映电影";
        tDiv.innerHTML = "即将上映";
        oFrag.appendChild(oDiv);
        oFrag.appendChild(tDiv);
        contenerBox_ul.appendChild(oFrag);
    }
   
    // 首页——即将上映
    function comingSoon(Imgurl,Name,Time){
        // 创建一个文档碎片
        var oFrag = document.createDocumentFragment();
        var oLi = document.createElement("li");
        oLi.innerHTML = "<div class='contenerBox_ul_ImgDiv'><img src="+Imgurl+" alt='' width='100%' height='100%'></div><div class='contenerBox_ul_neirDiv'><div class='title_name'><p>"+Name+"</p></div><div class='pinfen'><span>"+Time+"</span></div></div>";
        oFrag.appendChild(oLi);
        contenerBox_ulTwo.appendChild(oFrag);
    }
    
    // 左侧列表影片栏点击事件
    function film(){
        leftNav_ul_li[1].onclick = function(){
            // la();
            if(boolean == false){
                leftNav.style.left = "-1500px";
            }
            ContentHide();
            timerTwo = setInterval(function(){
                indexTwo++;
                if(indexTwo == 2){
                    Box.style.display = "block";
                    body.style.backgroundImage = "";
                    topTitle.style.visibility = "initial";
                    leftNav.style.display = "block"; 
                    contenerBox_ulThree.style.display = "block";
                    contenerBox.style.display = "block";
                    contenerBox_ul.style.display = "none";
                    contenerBox_ulTwo.style.display = "none";
                }
            },100);
            a();
            b();
            boolean = true;
        }
    }
    film();
    
    // 正在热映1~7条列表数据的创建
    function a(){
        //正在热映列表数据请求
        ajax("get","https://www.easy-mock.com/mock/5bdc1aff96a2e50a9ee1982d/example/zzry1","",function(ShujuThree){
        	var jsonThree = JSON.parse(ShujuThree);
            var ShujuFore = jsonThree.data.films;
            for (var j=0;j<leftNav_ul_li.length+1;j++) {
                var each = ShujuFore[j];
                // 创建一个文档碎片
                var oFrag = document.createDocumentFragment();
                var oLi = document.createElement("li");
                oLi.innerHTML = "<div class='nav_li_left'><img src="+each.cover.origin+" alt='' width='20%' height='100%'><div class='nav_li_left_content'><p>"+each.name+"</p><p>"+each.intro+"</p><p><span>"+each.cinemaCount+"</span>家影院上映&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>"+each.watchCount+"</span>人购票</p></div></div><div class='nav_li_right'><span>"+each.grade+"</span><img src='img/更多.png' width='20%'/></div>";
                oFrag.appendChild(oLi);
                contenerBox_ulThree.appendChild(oFrag);
            }
        });
    }

    // 正在热映8~14条列表数据的创建
    function b(){
        ajax("get"," https://www.easy-mock.com/mock/5bdc1aff96a2e50a9ee1982d/example/zzry2","",function(ShujuFore){
            var jsonFore = JSON.parse(ShujuFore);
            var ShujuThree = jsonFore.data.films;
            for(var k=0;k<leftNav_ul_li.length+1;k++){
                var each = ShujuThree[k];
                // 创建一个文档碎片
                var oFragTwo = document.createDocumentFragment();
                var uLi = document.createElement("li");
                uLi.innerHTML = "<div class='nav_li_left'><img src="+each.cover.origin+" alt='' width='20%' height='100%'><div class='nav_li_left_content'><p>"+each.name+"</p><p>"+each.intro+"</p><p><span>"+each.cinemaCount+"</span>家影院上映&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>"+each.watchCount+"</span>人购票</p></div></div><div class='nav_li_right'><span>"+each.grade+"</span><img src='img/更多.png' width='20%'/></div>";
                oFragTwo.appendChild(uLi);
                contenerBox_ulThree.appendChild(oFragTwo);
            }
        });
    }
    
    // 即将上映1~7条列表数据的创建
    function c(){
        ajax("get","https://www.easy-mock.com/mock/5bdc1aff96a2e50a9ee1982d/example/jjsy1","",function(ShujuFive){
            var jsonFive = JSON.parse(ShujuFive);
            var ShujuFive = jsonFive.data.films;
            for(var i = 0; i<ShujuFive.length;i++){
                var each = ShujuFive[i];
                // 将接收到的时间戳转为日期
                var date = new Date(each.premiereAt);
                var time = date.premiereAt;
                var oMonth = date.getMonth()+1;
                var oDate = date.getDate();
                var oDay = date.getDay();
                var weekArr = ["星期天","星期一","星期二","星期三","星期四","星期五","星期六"];
                var Time = oMonth+"月"+oDate+"日"+"上映";
                // 创建一个文档碎片
                var oFragThree = document.createDocumentFragment();
                var uLi = document.createElement("li");
                uLi.innerHTML = "<div class='nav_li_left'><img src="+each.cover.origin+" alt='' width='20%' height='100%'><div class='nav_li_left_content'><p>"+each.name+"</p><p>"+each.intro+"</p><p style='color: orangered'>"+Time+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style='color: orangered'>"+weekArr[oDay]+"</span></p></div></div><div class='nav_li_right'><img src='img/更多.png' width='20%'/></div>";
                oFragThree.appendChild(uLi);
                contenerBox_ulThree.appendChild(oFragThree);
            }
        });
    }
    // 即将上映8~14条列表数据的创建
    function d(){
        ajax("get","https://www.easy-mock.com/mock/5bdc1aff96a2e50a9ee1982d/example/jjsy2","",function(ShujuSix){
            var jsonSix = JSON.parse(ShujuSix);
            var ShujuSix = jsonSix.data.films;
            var time = ShujuSix.premiereAt;
            for(var i = 0; i<ShujuSix.length;i++){
                var each = ShujuSix[i];
                // 将接收到的时间戳转为日期
                var date = new Date(each.premiereAt);
                var oMonth = date.getMonth()+1;
                var oDate = date.getDate();
                var oDay = date.getDay();
                var weekArr = ["星期天","星期一","星期二","星期三","星期四","星期五","星期六"];
                var Time = oMonth+"月"+oDate+"日"+"上映";
                // 创建一个文档碎片
                var oFragFore = document.createDocumentFragment();
                var uLi = document.createElement("li");
                uLi.innerHTML = "<div class='nav_li_left'><img src="+each.cover.origin+" alt='' width='20%' height='100%'><div class='nav_li_left_content'><p>"+each.name+"</p><p>"+each.intro+"</p><p style='color: orangered'>"+Time+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style='color: orangered'>"+weekArr[oDay]+"</span></p></div></div><div class='nav_li_right'><img src='img/更多.png' width='20%'/></div>";
                oFragFore.appendChild(uLi);
                contenerBox_ulThree.appendChild(oFragFore);
            }
        });
    }

    //  正在热映和即将上映的点击事件函数
    // function la(){
        for(let i =0;i<navSpan.length;i++){
            console.log(navSpan);
            navSpan[i].index = i;
            navSpan[i].onclick = function(){
                // for(var i =0;i<navSpan.length;i++){
                //     navSpan[i].setAttribute("id","");
                // }
                // this.setAttribute("id","active");
                if(this.index==0){
                    console.log("1");
                    var navSpan = document.getElementsByClassName("nav")[0].getElementsByTagName("span");
                   contenerBox_ulThree.innerHTML = " <div class='nav'><span class='zzsy' id='active'>正在热映</span><span class='jjsy' >即将上映</span></div>";
                   a();
                   b();
                }
                if(this.index==1){
                  console.log("2");
                  var navSpan = document.getElementsByClassName("nav")[0].getElementsByTagName("span");
                  contenerBox_ulThree.innerHTML = " <div class='nav'><span class='zzsy'>正在热映</span><span class='jjsy'  id='active'>即将上映</span></div>";
                  c();
                  d();
                }
            }
        }
    // }
    // navSpan[0].onclick = function(){
    //     console.log("ss");
    //     contenerBox_ulThree.innerHTML = " <div class='nav'><span class='zzsy' id='active'>正在热映</span><span class='jjsy' >即将上映</span></div>";
    //     a();
    //     b();
    // }
    // navSpan[1].onclick = function(){
    //     contenerBox_ulThree.innerHTML = " <div class='nav'><span class='zzsy'>正在热映</span><span class='jjsy'  id='active'>即将上映</span></div>";
    //     c();
    //     d();
    // }
    // la();
}